<template>
	<view class="u-p-30">
		<view class="whitebox">
			<view class="flex-between">
				<view class="flex-a-c">
					<image src="../../static/logo.jpg" class="avatar" mode=""></image>
					<view class="info_msg u-m-l-20">
						<view class="flex-a-c">
							<text class="u-font-36 u-font-bold" >多大事</text>
							<view class="agebox u-radius-10 u-m-lr-20">
								22岁
							</view>
							<image src="../../static/women.jpg" style="width: 20rpx; height: 24rpx;" mode=""></image>
						</view>
						<view class="">
							希望在这里遇见好朋友
							<!-- <image src="/static/pen.jpg" class="u-m-l-40" style="width: 24rpx; height: 24rpx;" mode=""></image> -->
						</view>
					</view>
				</view>
				<view class="flow" @click="watch_user" >
					<text>+</text>
					<text class="u-m-l-10" >关注</text>
				</view>
				<!-- <view class="noflow" @click="cancle_watch_user()" >
					<text class="u-m-l-10" >取消关注</text>
				</view> -->
				
			</view>
			<view class="u-m-t-50 flex-around">
				<view class="threeitem flex-a-c">
					<view class="u-font-40 u-font-bold">
						2332
					</view>
					<view class="u-m-t-10" style="color: #bbb;">
						粉丝数
					</view>
				</view>
				<view class="threeitem flex-a-c">
					<view class="u-font-40 u-font-bold">
						2332
					</view>
					<view class="u-m-t-10" style="color: #bbb;">
						关注的人
					</view>
				</view>
				<view class="threeitem flex-a-c">
					<view class="u-font-40 u-font-bold">
						2332
					</view>
					<view class="u-m-t-10" style="color: #bbb;">
						好友数
					</view>
				</view>
			</view>
		</view>
	
	
		<view class="whitebox">
			<text>会员编号</text>
			<view class="flex-a-c u-m-tb-30 ">
				<view class="flex-a-c " >
					1231232
					<image src="/static/copy.png" class="u-m-l-30" style="width: 34rpx; height: 34rpx;" mode=""></image>
				</view>
				
			</view>
		</view>
		
		<view class="whitebox">
			<text>饮食习惯</text>
			<view class="flex-a-c u-m-tb-30 ">
				<view class="tipsitem " v-for="i in 3">
					哈哈哈
				</view>
				
			</view>
		</view>
	
		<view class="whitebox">
			<text>兴趣爱好</text>
			<view class="flex-a-c u-m-tb-30 ">
				<view class="tipsitem " v-for="i in 3">
					哈哈哈
				</view>
				
			</view>
		</view>
		
		<view class="whitebox">
			<text>个人特点</text>
			<view class="flex-a-c u-m-tb-30 ">
				<view class="tipsitem " v-for="i in 3">
					哈哈哈
				</view>
				
			</view>
		</view>
		
		<view class="whitebox">
			<text>职业头衔</text>
			<view class="flex-a-c u-m-tb-30 ">
				<view class="tipsitem " v-for="i in 3">
					哈哈哈
				</view>
				
			</view>
		</view>
		
		<view class="whitebox">
			<view class="flex-a-c">
				<text class="u-font-34 u-m-r-10" >出生年月日</text>
			</view>
			<view class="flex-a-c u-m-t-10">
				公历：2024年6月6日20：30
				
			</view>
			<view class="flex-a-c u-m-t-10">
				农历：2024年6月6日20：30
				
			</view>
			<!-- <view class="u-m-t-10 intro">
				如果说您填入了公历和农历中的一个，系统自动帮您算出的另一个与您自己记录的不同，那么请联系
				微信：123456，专家免费帮您看一下是什么情况
			</view> -->
		</view>
		
		
		<view class="whitebox">
			<view class="flex-a-c">
				<text class="u-font-34 u-m-r-10">八字属性及能量分</text>
			</view>
			<view class="flex-a-c u-m-t-10">
				甲木
				
			</view>
			<view class="flex-a-c u-m-t-10">
				68分
				
			</view>
			<view class="flex-a-c u-m-t-10">
				各五行数量：
			</view>
			<view class="flex-a-c u-m-t-10">
				<view class="flex-a-c">
					庚金：0个
					
				</view>
				<view class="flex-a-c u-m-l-90">
					辛金：0个
					
				</view>
			</view>
			<view class="flex-a-c u-m-t-10">
				<view class="flex-a-c">
					庚金：0个
					
				</view>
				<view class="flex-a-c u-m-l-90">
					辛金：0个
					
				</view>
			</view>
			<view class="flex-a-c u-m-t-10">
				<view class="flex-a-c">
					庚金：0个
					
				</view>
				<view class="flex-a-c u-m-l-90">
					辛金：0个
					
				</view>
			</view>
			<view class="flex-a-c u-m-t-10">
				<view class="flex-a-c">
					庚金：0个
					
				</view>
				<view class="flex-a-c u-m-l-90">
					辛金：0个
					
				</view>
			</view>
			
			
		</view>
	
		<view class="whitebox" style="color: #666666;">
			<view class="u-font-34 u-m-b-30" >联系方式</view>
			<view class="flex-between">
				<view class="flex-a-c">
					微信：1234123123
					<image src="../../static/copy.png" class="u-m-l-30" style="width: 34rpx; height: 34rpx;" mode=""></image>
					
				</view>
			</view>
			<view class="flex-between u-m-t-20">
				<view class="flex-a-c">
					电话：1234123123
					<image src="../../static/copy.png" class="u-m-l-30" style="width: 34rpx; height: 34rpx;" mode=""></image>
					
				</view>
			</view>
			<view class="flex-between u-m-t-20">
				<view class="flex-a-c">
					邮箱：1234123123
					<image src="../../static/copy.png" class="u-m-l-30" style="width: 34rpx; height: 34rpx;" mode=""></image>
					
				</view>
			</view>
			<view class="flex-between u-m-t-20">
				<view class="flex-a-c">
					qq：1234123123
					<image src="../../static/copy.png" class="u-m-l-30" style="width: 34rpx; height: 34rpx;" mode=""></image>
					
				</view>
			</view>
			<view class="flex-between u-m-t-20">
				<view class="flex-a-c">
					抖音：1234123123
					<image src="../../static/copy.png" class="u-m-l-30" style="width: 34rpx; height: 34rpx;" mode=""></image>
					
				</view>
			</view>
			<view class="flex-between u-m-t-20">
				<view class="flex-a-c">
					微博：1234123123
					<image src="../../static/copy.png" class="u-m-l-30" style="width: 34rpx; height: 34rpx;" mode=""></image>
					
				</view>
			</view>
			
		</view>
		
		<view class="whitebox">
			<view class="flex-between">
				<text class="u-font-34" >生活照片</text>
				<u-icon name='arrow-right' color='#BBBBBB' ></u-icon>
			</view>
			
			<scroll-view scroll-x="true"  style="white-space: nowrap;" >
				<image src="../../static/logo.jpg" v-for="i in 4" class="scrollimg u-m-t-30 u-radius-10" mode="aspectFill"></image>
			</scroll-view>
			
		</view>
		
		<view class="whitebox">
			<text class="u-font-34" >自我介绍</text>
			<view class="text-999 u-font-28 u-m-tb-30">
				本人从2000年开始吃素，一开始的时候只是觉得健康后来发现本人从2000年开始吃素，一开始的时候只是觉得健康。
			</view>
		</view>
	
		<view class="be_master u-m-t-80" @click="watch_user" >
			关注
		</view>
		<!-- <view class="nobe_master u-m-t-80" @click="cancle_watch_user" >
			取消关注
		</view> -->
		
		<view class="addbox text-999" @click="$goTo('pages/report/report')">
			举报
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		onLoad() {
			// this.getother_userinfo()
		},
		methods:{
			// 他人详情{{shop}}/chatapi/user/other_userinfo
			getother_userinfo(){
				this.$api.post('/user/other_userinfo',{
					chat_user_id:1
				}).then(res=>{
					
				})
			},
			// 关注他人
			watch_user(){
				this.$api.post('/user/watch_user',{
					chat_user_id:1
				}).then(res=>{
					
				})
			},
			// 取消关注他人{{shop}}/chatapi/user/cancle_watch_user
			cancle_watch_user(){
				this.$api.post('/user/cancle_watch_user',{
					chat_user_id:1
				}).then(res=>{
					
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.whitebox{
		font-size: 26rpx;
		width: 686rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 25rpx;
		margin: 20rpx auto;
		box-sizing: border-box;
	}
	.avatar{
		border: 1rpx solid #999;
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
	}
	.info_msg{
		display: flex;
		flex-direction: column;
		height: 110rpx;
		justify-content: space-around;
		.agebox{
			padding: 3rpx 10rpx;
			color: #49C064;
			background-color: #E7F5E9;
		}
	}
	.threeitem{
		flex-direction: column;
	}
	.tipsitem{
		background-color: #FDF4F1;
		color: #F5AC36;
		padding: 3rpx 20rpx;
		border-radius: 6rpx;
		&:nth-child(n+2){
			margin-left: 30rpx;
		}
	}
	.plus{
		background-color: #F1F1F1;
		padding: 1rpx 10rpx;
	}
	.intro{
		line-height: 50rpx;
	}
	.addbox{
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 50rpx 0 30rpx;
	}
	.scrollimg{
		width: 250rpx;
		height: 150rpx;
		border: 1rpx solid #999;
		&:nth-child(n+2){
			margin-left: 20rpx;
		}
	}
	.be_master{
		width: 686rpx;
		margin: 30rpx auto;
		color: #fff;
		background: linear-gradient(145.37deg, #49C064 0%, #5FD97B 100%);
		border-radius: 16rpx;
		padding: 26rpx 0;
		text-align: center;
	}
	.nobe_master{
		width: 686rpx;
		margin: 30rpx auto;
		color: #fff;
		background-color: #999;
		color: #fff;
		border-radius: 16rpx;
		padding: 26rpx 0;
		text-align: center;
	}
	.flow{
		border-radius: 36rpx;
		background: #49C064;
		color: #fff;
		text-align: center;
		padding: 15rpx 40rpx;
	}
	.noflow{
		border-radius: 36rpx;
		background: #999;
		color: #fff;
		text-align: center;
		padding: 15rpx 40rpx;
	}
</style>